<!--
 * @Description: 服务质量分析
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import { useServiceAnalysis } from '@fl/api/data-analysis'
import { cloneDeep } from 'lodash-es'

import type { DateRange, Dimension } from '../types'

import chatIcon from '../images/icon_chat.png'
import customerIcon from '../images/icon_customer.png'
import messageIcon from '../images/icon_message.png'
import phoneIcon from '../images/icon_phone.png'
import replyIcon from '../images/icon_reply.png'
import responseRate1Icon from '../images/icon_response_rate1.png'
import responseRate3Icon from '../images/icon_response_rate3.png'
import responseTimeIcon from '../images/icon_response_time.png'

const initialList = [
    {
        name: '顾问数',
        prop: 'propertyCount',
        url: customerIcon,
        value: '--',
    },
    {
        name: '单聊总数',
        prop: 'singleChat',
        url: chatIcon,
        value: '--',
    },
    {
        name: '已回复聊天占比',
        prop: 'replied',
        url: replyIcon,
        value: '--',
    },
    {
        name: '平均首次回复率（1分钟）',
        prop: 'repliedRateOne',
        url: responseRate1Icon,
        value: '--',
    },
    {
        name: '电话量',
        prop: 'phoneCount',
        url: phoneIcon,
        value: '--',
    },
    {
        name: '发送消息数',
        prop: 'sendMessage',
        url: messageIcon,
        value: '--',
    },
    {
        name: '平均首次回复时长',
        prop: 'repliedDuration',
        url: responseTimeIcon,
        value: '--',
    },
    {
        name: '平均首次回复率（3分钟）',
        prop: 'repliedRateThree',
        url: responseRate3Icon,
        value: '--',
    },
]
const dimenList = ref<Dimension[]>(initialList)

const oDateRange = inject<Ref<DateRange>>('dateRange')
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const { data } = useServiceAnalysis(oDateRange)

watchEffect(() => {
    if (data.value) {
        const finalList = cloneDeep(initialList).map(item => ({
            ...item,
            value: data.value[item.prop] ?? '--'
        }))
        dimenList.value = finalList
    }
})
</script>

<template>
    <div class="pr-20 mb-20">
        <h5 class="module-title">
            服务质量分析
        </h5>

        <div class="dimen-list">
            <div v-for="(item, index) in dimenList"
                 :key="index"
                 class="dimen-item"
            >
                <img class="dimen-icon"
                     :src="item.url"
                     alt=""
                >

                <div>
                    <p class="dimen-title">
                        {{ item.name }}
                    </p>

                    <span class="dimen-value">{{ item.value }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.dimen-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;

    .dimen-item {
        display: inline-flex;
        align-items: center;

        .dimen-icon {
            width: 36px;
            height: 36px;
            margin-right: 10px;
        }

        .dimen-title {
            font-size: 12px;
            line-height: 16px;
            color: #4e5969;
            // margin-bottom: 4px;
        }

        .dimen-value {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            color: #1d2129;
        }
    }
}
</style>
